<template>
    <section>
        <div style="padding: 15px 0px;">
            <div class="main-card" v-for="(device, index) in cardTempData" :style="{'background-color': device.Color}" @click="edit(device, aliasName[index], 'TEMP')">
                <div style="text-align: center;"><strong>{{aliasName[index]}}温度</strong></div>
                <div class="font-box"><svg-icon icon-class="temp01"></svg-icon>{{device.Data}}<font size="2">℃</font></div>
                <div style="text-align: center; margin-top: 15%; font-size: 12px"><strong>{{device.Time}}</strong></div>
            </div>
            <div class="main-card" v-for="(device, index) in cardHumData" :style="{'background-color': device.Color}" @click="edit(device, aliasName[index], 'HUM')">
                <div style="text-align: center;"><strong>{{aliasName[index]}}湿度</strong></div>
                <div class="font-box"><svg-icon icon-class="hum01"></svg-icon> {{device.Data}}<font size="2">%</font></div>
                <div style="text-align: center; margin-top: 15%; font-size: 12px"><strong>{{device.Time}}</strong></div>
            </div>
        </div>
    </section>
</template>

<script>

    import {getMainTempIndex, getMainHumIndex} from '../../api/api';

    export default {
        data: () => ({
            cardTempData: [],
            cardHumData: [],
            aliasName: [],
            updateT: null,
            updateH: null
        }),
        mounted(){
            this.getTempData();
            this.getHumData();
            this.loopUpdateTH();
        },
        beforeRouteLeave(to, form, next) {
            clearInterval(this.updateT);
            clearInterval(this.updateH);
            next()
        },
        methods: {
            loopUpdateTH() {
                this.updateT = setInterval(()=>{
                    this.getTempData();
                }, Math.ceil(Math.random()*9999 + 50000));
                this.updateH = setInterval(()=>{
                    this.getHumData();
                }, Math.ceil(Math.random()*9999 + 50000));
            },
            getTempData() {
                getMainTempIndex().then((res) => {
                    if (res.data.code == "SUCCESS") {
                        let mid = "";
                        let dataList = res.data.data.split(',');
                        // 排序
                        for (let i=0; i < dataList.length-1; i++) {
                            for (let j=0; j < dataList.length-1-i; j++) {
                                if (dataList[j] > dataList[j+1]) {
                                   mid = dataList[j];
                                   dataList[j] = dataList[j+1];
                                   dataList[j+1] = mid;
                                }
                            }
                        }
                        let list = [];
                        // 分割
                        dataList.map((mapData, s1) => {
                            if (mapData != "") {
                                let device = mapData.split("&");
                                this.aliasName[s1] = device[0];
                                if (device.length == 3) {
                                    // 显示别名
                                    let color = "#00C0EF";
                                    res.data.info.split(',').map((alias, s2) => {
                                        let name = alias.split(":");
                                        if (name.length == 3 && device[0] == name[0]) {
                                            this.aliasName[s1] = name[1];
                                            color = name[2].toString();
                                        }
                                    })
                                    list[s1] = {Name: device[0], Data: device[1], Color: color, Time: device[2]}
                                }
                            }
                        })
                        this.cardTempData = list;
                    }
                });
            },
            getHumData() {
                getMainHumIndex().then((res) => {
                    if (res.data.code == "SUCCESS") {
                        let mid = "";
                        let dataList = res.data.data.split(',');
                        // 排序
                        for (let i=0; i < dataList.length-1; i++) {
                            for (let j=0; j < dataList.length-1-i; j++) {
                                if (dataList[j] > dataList[j+1]) {
                                   mid = dataList[j];
                                   dataList[j] = dataList[j+1];
                                   dataList[j+1] = mid;
                                }
                            }
                        }
                        let list = [];
                        // 分割
                        dataList.map((mapData, s1) => {
                            if (mapData != "") {
                                let device = mapData.split("&");
                                this.aliasName[s1] = device[0];
                                if (device.length == 3) {
                                    // 显示别名
                                    let color = "#00C0EF";
                                    res.data.info.split(',').map((alias, s2) => {
                                        let name = alias.split(":");
                                        if (name.length == 3 && device[0] == name[0]) {
                                            this.aliasName[s1] = name[1];
                                            color = name[2].toString();
                                        }
                                    })
                                    list[s1] = {Name: device[0], Data: device[1], Color: color, Time: device[2]}
                                }
                            }
                        })
                        this.cardHumData = list;
                    }
                });
            },
            edit(device, aliasName, type) {
                this.$router.push({path:"/mainEdit", 
                    query: {name: device.Name, alias: aliasName, color: device.Color, time: device.Time, type: type}});
            }
        }

    }
</script>

<style>
    .el-card__header {
        background: #FBFBFB;
    }
    .main-card {
        margin-bottom: 10px;
        width: 145px;
        height: 145px;
        border-radius: 25px;
        color: #fff;
        padding: 18px;
        box-sizing: border-box;
        margin-right: 10px;
        margin-left: 2px;
        float: left;
    }
    .font-box {
        margin-top: 15%;
        text-align:center;
        font-size: 28px;
        font-weight: bold;
    }
    .main-setting-button {
        color: #FFF; float:right; padding: 0;
    }
</style>